<template>
  <div class="car_type_model">
    <div class="car-lable"><span class="car-lable-icon">*</span>车型选择</div>
    <el-form-item :prop="`transportRequirement.vehicleType`"
                  :rules="[{ required: true, message: `请选择车型`, trigger: 'change' }]"
                  label-width="50px">
      <div class="img-box">
        <span v-for="(item, index) in vehicleModels"
              :key="item.value"
              :label="item.value + ',' + item.name"
              class="imgSty"
              @click="handleSelectCar(item, index)"
              :class="
              index === form.transportRequirement.vehicleType - 1
                ? 'active'
                : ''
            ">
          <img class="iconSty"
               :src="item.image"
               alt="">
          <span>{{ item.name }}</span>
        </span>
      </div>
    </el-form-item>
    <el-row v-if="form.transportRequirement.vehicleType">
      <el-col :span="6">
        <el-form-item label="车身长"
                      prop="transportRequirement.vehicleLength"
                      :rules="[
            { required: true, message: `请选择车身长`, trigger: 'change' }
          ]"
                      label-width="120px">
          <el-select v-model="form.transportRequirement['vehicleLength']"
                     filterable
                     clearable
                     style="width: 94%"
                     @change="handleLength">
            <el-option v-for="item in specOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8"
              v-if="isReadonly">
        <div class="describeSty">
          最大承载体积{{
            form.transportRequirement["vehicleVolume"] || 0
          }}立方米；最大承载重量{{
            form.transportRequirement["vehicleWeight"] || 0
          }}吨
        </div>
      </el-col>
      <div v-else>
        <el-col :span="8">
          <el-form-item label="容积"
                        :rules="[
              { required: true, message: `请输入容积`, trigger: 'blur' }
            ]"
                        prop="transportRequirement.vehicleVolume"
                        label-width="120px">
            <el-input v-model="form.transportRequirement['vehicleVolume']"
                      placeholder="请输入容积"
                      @input="updateInput($event, 'volume')"
                      oninput="this.value=(this.value.match(/\d{0,3}(\.\d{0,2})?/)||[''])[0];">
              <template slot="append">立方米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="载重"
                        :rules="[
              { required: true, message: `请输入载重`, trigger: 'blur' }
            ]"
                        prop="transportRequirement.vehicleWeight"
                        label-width="120px">
            <el-input v-model="form.transportRequirement['vehicleWeight']"
                      placeholder="请输入载重"
                      @input="updateInput($event, 'weight')"
                      oninput="this.value=(this.value.match(/\d{0,2}(\.\d{0,2})?/)||[''])[0];">
              <template slot="append">吨</template>
            </el-input>
          </el-form-item>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { loadVehicleModels } from "@basic/assets/vehicle.models";
import vehicleModels from "@basic/assets/vehicle.models";
export default {
  name: "ModelsSelector",
  data () {
    return {
      isDis: false,
      specOptions: [],
      isReadonly: false,
      form: {}
    };
  },
  props: {
    formInfo: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    vehicleModels () {
      return vehicleModels.value;
    },
  },
  watch: {
    formInfo: {
      handler () {
        this.form = this.formInfo;
        if (this.form.transportRequirement.vehicleType) {
          this.specOptions =
            this.vehicleModels[this.form.transportRequirement.vehicleType - 1]?.length;
        }
        this.isReadonly =
          this.form.transportRequirement.vehicleLength === 999 ? false : true;
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    loadVehicleModels();
    this.form = this.formInfo;
    this.isReadonly =
      this.form.transportRequirement.vehicleLength === 999 ? false : true;
  },
  methods: {
    initData () {
      this.form.transportRequirement.vehicleLength = "";
      this.form.transportRequirement.vehicleVolume = "";
      this.form.transportRequirement.vehicleWeight = "";
    },
    /**
     * 选择车辆
     */
    handleSelectCar (item, index) {
      this.initData();
      this.specOptions = this.vehicleModels[item.value - 1].length;
      this.$emit("confirm", item.value);
    },
    handleLength (val) {
      this.isReadonly = false;
      const selectItem = {};
      this.specOptions.forEach((item) => {
        if (item.value == val) Object.assign(selectItem, item);
      });
      this.form.transportRequirement.vehicleVolume = selectItem.volume;
      this.form.transportRequirement.vehicleWeight = selectItem.load;
      this.$emit(
        "confirm",
        this.form.transportRequirement.vehicleType,
        val,
        selectItem.volume,
        selectItem.load
      );
      if (
        this.form.transportRequirement.vehicleVolume &&
        this.form.transportRequirement.vehicleWeight
      )
        this.isReadonly = true;
    },
    updateInput (val, type) {
      this.$emit(
        "confirm",
        this.form.transportRequirement.vehicleType,
        this.form.transportRequirement.vehicleLength,
        type === "volume" ? val : this.form.transportRequirement.vehicleVolume,
        type === "weight" ? val : this.form.transportRequirement.vehicleWeight
      );
      // this.form.transportRequirement.vehicleVolume = type === 'volume' ? val : this.form.transportRequirement.vehicleVolume
      // this.form.transportRequirement.vehicleWeight = type === 'weight' ? val : this.form.transportRequirement.vehicleWeight
      this.$forceUpdate(); //强制刷新
    }
  }
};
</script>

<style lang="scss" scoped>
.car-lable {
  width: 120px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--prev-color-text-regular);
}
.car-lable-icon {
  color: var(--prev-icon-color-orange);
  margin-right: 4px;
}
.car_type_model {
  .img-box {
    width: 100%;
    overflow: auto;
    white-space: nowrap;
  }
  .imgSty {
    cursor: pointer;
    border: 1px solid #eee;
    width: 108px;
    height: 108px;
    display: inline-block;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 20px;
    * {
      padding: 0;
      margin: 0;
    }
    .iconSty {
      width: 108px;
      height: 78px;
      overflow: hidden;
    }
    > span {
      line-height: 30px;
      height: 30px;
      text-align: center;
      display: block;
      margin-top: -15px;
    }
  }
  .dialog-footer {
    display: block;
  }
  .active {
    width: 130px !important;
    height: 130px !important;
    border: 2px solid var(--prev-color-primary);
    background-color: #fff5f1;
    opacity: 1;
    .iconSty {
      width: 106px;
      height: 98px;
      margin-left: 12px;
      margin-bottom: 8px;
      overflow: hidden;
    }
  }
  ::v-deep .el-input--small {
    margin-right: 10px;
  }
}
.describeSty {
  font-size: 13px;
  line-height: 40px;
  color: var(--prev-color-primary);
}
.ml42 {
  margin-left: 42px;
}
</style>
